<template>
	<wsPage title="会员信息">
		<div slot="page_operate">
			<Button type="ghost" @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

		<!-- 会员详情 -->
		<wsModal v-model="detailModal.show" title="详情" @on-ok="detailModalCancel" @on-cancel="detailModalCancel" :width="800">
		    <Row>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						昵称：
					</Col>
					<Col>
						{{detailForm.nickname}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						电话：
					</Col>
					<Col>
						{{detailForm.phone}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						邮箱：
					</Col>
					<Col>
						{{detailForm.email}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						性别： 
					</Col>
					<Col>
						{{detailForm.sex === null?'':detailForm.sex === '1'?'男':'女'}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						头像：
					</Col>
					<Col>
						<img v-if="detailForm.imageId"  v-img="{title: '头像', group:'a'}" class="demo-img" :src="'/ws/img/view/'+detailForm.imageId"/>
					</Col>
		    	</Col>
		    </Row>
		</wsModal>
	</wsPage>
</template>

<script>
	export default {
		data() {
			return {
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
					{
						title: '会员昵称',
						key: 'nickname',
						align: 'center'
					},
					{
						title: '会员姓名',
						key: 'name',
						align: 'center'
					},
					{
						title: '手机号',
						key: 'phone',
						align: 'center'
					},
					{
						title: '性别',
						key: 'sex',
						align: 'center',
						render: (h, params) => {
							return h('span',{

							},params.row.sex == 1 ? '男':'女')
						}
					},
					{
						title: '操作',
						width: 200,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							return h('div', [h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.detailModal.show = true;
										this.queryMember(params.row.id);
									}
								}
							}, '详情')])
						}
					}],
					vipCards: [],
					cardTypes: [],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				detailForm:{},
				detailModal: {
					show: false
				}
			}
		},
		computed: {

		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.query();
			},
			//刷新
			refresh(){
				this.table.page.pageNum = 1;
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ms/members?pageNum=' + pageNum + '&pageSize=' + pageSize).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			//详情取消
			detailModalCancel(){
				this.detailModal.show = false;
			},
			//详情
			queryMember(id){
				const _this = this;
				this.axios.get('/ws/ms/members/' + id).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.detailForm = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			}

		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.layout-content-main{
        padding: 20px;
        float:left;
        justify-content: space-around;
        font-size:14px;
    }
</style>
